<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--      筛选-->
      <!--      分栏24占满 -->
      <el-col :span="24" :xs="24">
        <el-form v-if="!loading" label-position="top" :rules="rules" :model="data" ref="form" size="small"  label-width="100px">
          <el-form-item label="标题" prop="title">
            <el-input
              v-model="data.title"
              placeholder="请输入标题"
              clearable
            />
          </el-form-item>
          <el-form-item label="置顶" prop="seq">
            <el-input
              v-model="data.seq"
              type="number"
              placeholder="数字越大，越靠前"
              clearable
            />
          </el-form-item>
          <el-form-item label="跳转路径" prop="url">
            <el-input
              v-model="data.url"
              placeholder="填写后内容不生效"
              clearable
            />
          </el-form-item>
          <el-form-item label="描述" prop="content">
            <md-editor ref="descriptionMd" :default-data="data.content"/>
          </el-form-item>
          <el-form-item label="是否启用" prop="codeShare">
            <el-switch
              v-model="data.status"
              :active-value="0"
              :inactive-value="1"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-button :loading="savaLoading" type="sussess" @click="sava" style="width: 100%">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import MdEditor from '@/components/mdEditor'
import Reference from '@/components/Reference'
import * as Api from "@/api/announcement"
export default {
  name: 'AddAnnouncement',
  components: { Reference, MdEditor },
  data(){
    return{
      loading:false,
      tagLoading:false,
      languagesLoading:false,
      difficultyLoading:false,
      problemTypeLoading:false,
      savaLoading:false,
      data : {
        url:"",
        title:undefined,
        content:"",
        seq:0,
        status:0,
      },
      difficultyList:[],
      languageList:[],
      problemTypeList:[],
      languageIdList:[],
      rules: {
        title: [{ required: true, message: "标题不能不为空", trigger: "blur", },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }],
      },
    }
  },
  created() {
    const id = this.$route.query.id;
    console.log(id)
    if(id != undefined && id != null){
      this.loading = true;
      Api.query(id).then(res => {
        this.data = res.data
      }).finally(() => {
        this.loading = false;
      })
    }else{

    }
  },
  methods:{
    sava(){
      this.data.content = this.$refs.descriptionMd.getValue();
      if(this.data.content == "" && this.data.url == ""){
        this.$message.success("内容和路径不能同时为空！")
        return;
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.savaLoading = true;
          Api.saveOrUpdate(this.data).then(res => {
            this.$message.success("保存成功！")
          }).catch(err => {

          }).finally(() => {
            this.savaLoading = false;
          })
        }else{
          this.$message.error("校验失败！")
        }
      });
    },

  }
}
</script>

<style scoped>

</style>
